<template>
	<view class="page">
		<view class="top"></view>
		<view class="home-navbar">
			<text>彩云约车</text>
			<image src="../../static/uimage/chat1.svg" mode=""></image> 
		</view>
		<view class="home">
			<view class="anquan">
				<image src="../../static/uimage/anquan.svg" mode=""></image>
				安全中心
			</view>
			<image src="../../static/uimage/dingwei.svg" class="dingwei"></image>
			<view class="header">
				<input placeholder-class="departuer" placeholder="在哪上车" />
				<input placeholder-class="departuer" placeholder="在哪下车" />
			</view>
		</view>
		<view class="nav">
			<view class="navitem">
				<image mode="aspectFit" src="../../static/uimage/shunfengche.svg"></image>
				<view><text>顺丰车</text></view>
			</view>
			<view class="navitem">
				<image mode="aspectFit" src="../../static/uimage/daijia.svg"></image>
				<view><text>代驾</text></view>
			</view>
			<view class="navitem">
				<image mode="aspectFit" src="../../static/uimage/banjia.svg"></image>
				<view><text>搬家/运货</text></view>
			</view>
			<view class="navitem">
				<image mode="aspectFit" src="../../static/uimage/chengweisiji.svg"></image>
				<view><text>成为司机</text></view>
			</view>
			<view class="navitem">
				<image mode="aspectFit" src="../../static/uimage/book.svg"></image>
				<view><text>预约</text></view>
			</view>
			<view class="navitem">
				<image mode="aspectFit" src="../../static/uimage/chongzhi.svg"></image>
				<view><text>充值</text></view>
			</view>
			<view class="navitem">
				<image mode="aspectFit" src="../../static/uimage/lukuang.svg"></image>
				<view><text>路况查询</text></view>
			</view>
			<view class="navitem">
				<image mode="aspectFit" src="../../static/uimage/pinche.svg"></image>
				<view><text>特惠拼车</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "home-conponent",
		data() {
			return {};
		}
	}
</script>

<style>
	.top{
		height: 70rpx;
	}
	.home-navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFCC3F;
		height: 120rpx;
		width: 100%;
		font-size: 50rpx;
	}
	.home-navbar text{
		margin-left: 275rpx;
	}
	.home-navbar image{
		height: 70rpx;
		width: 70rpx;
		margin-left:100rpx;
		border-radius: 20rpx;
		margin-right: 5rpx;
	}
	.anquan{
		margin-top: 435rpx;
		background-color: white;
		display: flex;
		align-items: center;
		border-radius: 10rpx;
	}
	.home {
		margin-top: 60rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		height: 700rpx;
		width: 90%;
		background-color: whitesmoke;
		border: 3rpx solid wheat;
		border-radius: 25rpx;
	}
	.home image{
		height: 50rpx;
		width: 50rpx;

	}
	.dingwei{
		margin-left: 500rpx;
	}
	.header {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		height: 30%;
		width: 100%;
		background-color: white;
		border-radius: 25rpx;
	}

	.header input {
		display: flex;
		border: 4rpx solid antiquewhite;
		color: #C1C1C1;
		margin: 5rpx;
		height: 38%;
		width: 50%;
		align-items: center;
		border-radius: 15rpx;
		font-size: 40rpx;
	}

	.page {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.nav {
		width: 90%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		justify-content: space-around;
	}

	.navitem image {
		margin: 20rpx;
		width: 100rpx;
		height: 100rpx;
	}

	.navitem text {
		color: #8a8a8a;
	}
    .gn{
		margin-top: 50rpx;
		display: flex;
		flex-wrap: wrap;
	    justify-content: center;
		justify-content: space-between;
		align-items: center;
		width: 90%;
		height: 330rpx;
		background-color: floralwhite;
	}
	.navitem {
		height: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: -10rpx;
	}
</style>
